<template>
  <div>
      <div class="navtexts"> 
        <div class="bianjisp">编辑商品</div>
        <div class="quanbuhei">全部好物<span>></span></div>
        <div class="jihuinavs cur" v-for="(item,index) in navtext" :key="index" :class="nastext == index ? 'redtext' : ''" @click="addnavtext(index)">{{item}}</div>
      </div>


    <div class="bjsptitle">编辑商品</div>
    <div class="bjspinput">
      <div class="leftbjspinput">
        <div class="zhutiinp">商品名称</div>
        <input type="text" v-model="form.name" />
      </div>
      <div class="leftbjspinput">
        <div class="zhutiinp">商品</div>
        <input type="text" v-model="form.types" />
        <div class="rightjt cur" @click="addrightjt()">
          <img src="../assets/rightjt.png" alt="" class="jtimg" />
        </div>
      </div>
    </div>

    <div class="uploadpic">
      <div class="leftuploadpic">
        <div class="redtoptext">抽奖主图</div>
        <div>
          <el-upload
            class="avatar-uploaderone"
            :action="`${api}/index.php/index/goodses/uploadfiles`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'jpimg' });
              }
            "
          >
            <img
              v-if="form.jpimg"
              :src="ifImgHeader(form.jpimg)"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="imgsize">图片尺寸：680X680px</div>
      </div>

      <div class="leftuploadpic">
        <div class="redtoptext">活动列表页图</div>
        <div>
          <el-upload
            class="avatar-uploadertow"
            :action="`${api}/index.php/index/goodses/uploadfiles`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'img' });
              }
            "
          >
            <img v-if="form.img" :src="ifImgHeader(form.img)" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="imgsize">图片尺寸：680X390px</div>
      </div>

      <div class="leftuploadpic">
        <div class="redtoptexts">
          <div class="reai"><img src="../assets/reai.png" alt="" /></div>
          热爱进行时
        </div>
        <div>
          <el-upload
            class="avatar-uploaderthree"
            :action="`${api}/index.php/index/goodses/uploadfile`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'images' });
              }
            "
          >
            <img
              v-if="form.images"
              :src="ifImgHeader(form.images)"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="imgsize">图片尺寸：260X360px</div>
      </div>
    </div>

    <div style="display:flex">
          <div class="leftbjspinputs">
            <div class="zhutiinp">库存数量</div>
            <input type="text" v-model="form.title" />
        </div>
        <div class="leftbjspinputs">
            <div class="zhutiinp">商品状态</div>
            <el-radio v-model="radio" label="1">发布</el-radio>
            <el-radio v-model="radio" label="2">隐藏</el-radio>
        </div>
    </div>

   <div style="display:flex">
      <div class="jifenjiazhi">
          <div class="zhutiinp">积分兑换</div>
          <input type="text" v-model="form.twlink" />
      </div>
      <div class="jifenjiazhi">
          <div class="zhutiinp">商品价值</div>
          <input type="text" v-model="form.twlink" />
      </div>
   </div>

    <div style="display:flex">
      <div class="leftbjspinputs">
        <div class="zhutiinp">推文链接</div>
        <input type="text" v-model="form.twlink" />
      </div>
      <div style="display:flex;margin-left:300px;margin-top: 20px;">
        <div class="fabucj cur">发布抽奖</div>
        <div class="quxfb cur">取消发布</div>
      </div>
    </div>
  </div>
</template>
<script>
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  components: {},
  data() {
    return {
      HttpImg: "http://gyycadmincss.hansn.cn",
      form: {
        name: "", //抽奖主题
        types: "", //抽奖类型
        jpimg:'', //抽奖主图
        img:'',//活动列表页图
        images:'',//热爱进行时
        title:'',//抽奖详情
        kjtime:'',//开奖时间
        twlink:'',//推文链接
      },
      radio:'1',
      navtext:['骑行装备','节日限定','优惠服务'],
      xialalxList: ["概率抽奖", "机会抽奖", "活动抽奖"],
    };
  },
  mounted() {},
  methods: {
    addrightjt() {},
  },
};
</script>
<style>
.el-radio__input.is-checked+.el-radio__label{
  color: #000 !important;
}
.el-radio__input.is-checked .el-radio__inner{
  background-color: #FF0000 !important;
}
.el-radio__label{
  font-size: 18px !important;
}
.el-radio__inner{
  width: 18px !important;
  height: 18px !important;
}
.bianjicj {
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-bottom: 57px;
}
.bjsptitle {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 12px;
}
.bjspinput {
  display: flex;
}
.leftbjspinput {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 540px;
  padding: 12px 25px 12px 12px;
  border: 1px solid #000;
  margin-right: 81px;
}
.leftbjspinputs{
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  width: 540px;
  padding: 12px 25px 12px 12px;
  border: 1px solid #000;
  margin-right: 81px;
}
.jifenjiazhi{
  display: flex;
  margin-bottom: 25px;
  width: 245px;
  padding: 12px 25px 12px 12px;
  border: 1px solid #000;
  margin-right: 10px;
}
.jifenjiazhi input{
  width: 50px;
}
.zhutiinp {
  color: #ff0000;
  font-weight: 700;
  font-size: 18px;
  margin-right: 38px;
}
.rightjt {
  width: 10px;
  height: 16px;
}
.rightjt:hover img {
  transform: rotate(90deg);
}
.rightjt img {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}

input {
  width: 375px;
  font-size: 18px;
}
.uploadpic {
  display: flex;
  margin-top: 47px;
  margin-bottom: 51px;
}
.leftuploadpic {
  margin-right: 50px;
}
.redtoptext {
  font-size: 18px;
  font-weight: 700;
  color: #ff0000;
  margin-bottom: 7px;
}
.redtoptexts {
  display: flex;
  font-size: 18px;
  font-weight: 700;
  color: #ff0000;
  margin-bottom: 7px;
}
.reai {
  width: 22px;
  height: 22px;
}
.reai img {
  width: 100%;
  height: 100%;
}
.imgsize {
  font-size: 14px;
  font-weight: 400;
  color: #000;
}
.avatar-uploaderone{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  background-color: #F6F6F6;
}
.avatar-uploadertow{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 360px;
  border: 1px solid #000;
  background-color: #F6F6F6;
}
.avatar-uploaderthree{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  border: 1px solid #000;
  background-color: #F6F6F6;
}
.fabucj{
  width: 114px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color:#FF0000;
}
.quxfb{
  width: 114px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color:#707070;
  margin-left: 22px;
}
.navtexts{
	display: flex;
	align-items: center;
  margin-bottom: 57px;
}
.bianjisp{
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-right: 32px;
  margin-top: 12px;
}

.quanbuhei{
	font-size: 18px;
	font-weight: 700;
	color: #000;
}
.quanbuhei span{
	margin: 0 42px 0 16px;
	color: #FF0000;
}
.jihuinavs{
	margin-right: 29px;
	font-size: 18px;
	font-weight: 400;
}
</style>
